<template>
  <div class="sjplatformSelectForm">
    <el-form :inline="true">
      <el-form-item label="角色名称">
        <el-input v-model="roleTable.queryCondition.roleName" placeholder="请输入名称..." />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchData">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="openEditForm('add', null)">新增</el-button>
      </el-form-item>
    </el-form>
  </div>
  <div class="sjplatformtable">
    <el-table :data="roleTable.tableData" v-loading="loading" stripe border style="width: 100%">
      <el-table-column label="序号" width="60">
        <template #default="{ $index }">
          {{ $index + 1 + (currentPage - 1) * pageSize }}
        </template>
      </el-table-column>
      <el-table-column prop="roleName" label="名称" />
      <el-table-column prop="addTime" label="创建时间" width="280">
        <template #default="{ row }">
          <span>{{ commonUtil.Methods.formatDate(row.addTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="280">
        <template #default="{ row }">
          <el-tooltip content="配置权限" placement="bottom" effect="light">
            <i class="setting-icon" @click="configAuthority(row)"></i>
          </el-tooltip>
          <el-tooltip content="修改" placement="bottom" effect="light">
            <i class="edit-icon" @click="openEditForm('edit', row)"></i>
          </el-tooltip>
          <el-tooltip content="删除" placement="bottom" effect="light">
            <i class="del-icon" @click="handleDelete(row)"></i>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination layout="prev, pager, next" :total="roleTable.total" :page-size="pageSize" :current-page="currentPage"
      @current-change="handleCurrentChange" />
  </div>
  <el-dialog v-model="newRoleTableVisible" :title="formTitle" width="50%" draggable>
    <RoleAddOrUpdate />
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button @click="reset">重置</el-button>
        <el-button type="primary" @click="operateUser">确定</el-button>
      </span>
    </template>
  </el-dialog>
  <el-drawer v-model="openAuthorityConfig" direction="rtl" :before-close="handleDrawerClose">
    <template #header="{ titleId }">
      <h4 :id="titleId">配置权限</h4>
    </template>
    <AuthorityConfigForm :roleId="roleId" @updatecheckall="updateCheckAll" ref="acf" />
    <template #footer>
      <el-row>
        <el-col :span="8"><el-checkbox label="全选" v-model="checkAll" @change="handleCheckAll" /></el-col>
        <el-col :span="16" class="align-right-buttons">
          <div>
            <el-button @click="openAuthorityConfig = false">取消</el-button>
            <el-button type="primary" @click="confirmClick">确定</el-button>
          </div>
        </el-col>
      </el-row>
    </template>
  </el-drawer>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import RoleAddOrUpdate from "./RoleAddOrUpdate.vue";
import AuthorityConfigForm from "../../../components/SystemManager/Authority/AuthorityConfigForm.vue";
import commonUtil from "../../../utils/common";
import { useRoleTable } from "../../../hooks/SystemManager/Role/useRoleTable";

let currentPage = ref(1);
let pageSize = ref(10); // 默认每页大小
let formTitle = ref("新增角色");
let loading = ref(false);
let openAuthorityConfig = ref(false); //打开权限配置

let newRoleTableVisible = ref(false); //新增机构窗口
let addOrUpdate = ref("add"); //新增还是修改
let roleId = ref("");
let checkAll = ref(false);
let acf = ref(); //权限配置页面对象

let { roleTable, roleStore, queryData, addData, updateData, deleteData } =
  useRoleTable(currentPage, pageSize);
queryData();

//打开编辑窗口
function openEditForm(value, data) {
  addOrUpdate.value = value;
  if (value == "add") {
    formTitle.value = "新增角色";
    roleStore.resetRoleModel();
  }
  if (value == "edit") {
    formTitle.value = "修改角色";
    roleStore.roleModel = data;
  }
  newRoleTableVisible.value = true;
}

//配置权限窗口
function configAuthority(data) {
  roleId = data.id;
  openAuthorityConfig.value = true;
}
//更新是否全选
function updateCheckAll(value) {
  checkAll.value = value;
}
//确定权限配置
async function confirmClick() {
  if (await acf.value.SetAuthorityToRole(roleId)) {
    openAuthorityConfig.value = false;
    commonUtil.Methods.ShowMessage("success", "权限配置成功！");
  } else {
    commonUtil.Methods.ShowMessage("Oops", "权限配置失败！");
  }
}
//全选
async function handleCheckAll() {
  acf.value.checkAll(checkAll.value);
}
//权限配置窗口关闭事件
function handleDrawerClose() {
  roleId = ref("default");
  openAuthorityConfig.value = false;
}
//翻页事件
function handleCurrentChange(newPage) {
  currentPage.value = newPage;
  searchData(); // 根据当前页获取数据
}
//新增或修改
async function operateUser() {
  if (addOrUpdate.value == "add") {
    if (await addData()) {
      commonUtil.Methods.ShowMessage("success", "新增角色成功！");
      newRoleTableVisible.value = !newRoleTableVisible.value;
    } else {
      commonUtil.Methods.ShowMessage("Oops", "新增角色失败！");
    }
  }
  if (addOrUpdate.value == "edit") {
    if (await updateData()) {
      commonUtil.Methods.ShowMessage("success", "修改角色成功！");
      newRoleTableVisible.value = !newRoleTableVisible.value;
    } else {
      commonUtil.Methods.ShowMessage("Oops", "修改角色失败！");
    }
  }
  searchData();
}
//删除
async function handleDelete(data) {
  if (await deleteData(data.id)) {
    commonUtil.Methods.ShowMessage("success", "删除角色成功！");
  } else {
    commonUtil.Methods.ShowMessage("Oops", "删除角色失败！");
  }
  searchData();
}
//重置按钮
function reset() {
  roleStore.resetRoleModel();
}
//取消新增窗口
function cancel() {
  roleStore.resetRoleModel();
  newRoleTableVisible.value = !newRoleTableVisible.value;
}
//查询按钮
function searchData() {
  loading.value = true;
  currentPage.value = 1;
  queryData();
  loading.value = false;
}
</script>